<template>
    <a-card :bordered="false">
        <a-steps class="steps" :current="currentTab">
            <a-step title="选取数据源配置" />
            <a-step title="选取模板域" />
            <a-step title="选取模板宏" />
            <a-step title="生成" />
        </a-steps>
        <div class="content">
            <step1 v-show="currentTab === 0" @nextStep="(obj)=>nextStep(obj)"/>
            <step2 v-show="currentTab === 1" @nextStep="(obj)=>nextStep(obj)" @prevStep="(obj)=>prevStep(obj)"/>
            <step3 v-show="currentTab === 2" @nextStep="(obj)=>nextStep(obj)" @prevStep="(obj)=>prevStep(obj)"/>
            <step4 v-show="currentTab === 3" @prevStep="prevStep" @finish="finish"/>
        </div>
    </a-card>
</template>

<script>
import Step1 from './CodeGenerateStep1'
import Step2 from './CodeGenerateStep2'
import Step3 from './CodeGeneratorStep3'
import Step4 from "./CodeGeneratorStep4";

import { axios } from '@/utils/request'
import qs from 'qs'

export default {
  name: "StepForm",
  components: {
    Step1,
    Step2,
    Step3,
    Step4
  },
  data () {
    return {
      currentTab: 0,
      record: {}
    }
  },
  methods: {
    nextStep (obj) {
      Object.assign(this.record, obj)
      if (this.currentTab < 3) {
        this.currentTab += 1
      }
    },
    prevStep (obj) {
      let _keys = Object.keys(obj)
      let _kv = {}
      _keys.forEach(item => {
        _kv[item] = ''
      })
      //清空之前的更改
      Object.assign(this.record, _kv)
      if (this.currentTab > 0) {
        this.currentTab -= 1
      }
    },
    finish () {
      axios({
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
        },
        url: '/codeGenerate/generate',
        method: 'post',
        data: qs.stringify(this.record),
        responseType: 'blob'
      }).then(res => {
        this.Atm.asyncDownloadFile(res, () => {
          this.$message.success('生成成功!')
        })
      })
      // this.Atm.postAction('/codeGenerate/generate', this.record, 1).then(res => {
      //   this.Atm.asyncDownloadFile(res, () => {
      //     this.$message.success('生成成功!')
      //   })
      // })
      this.currentTab = 0
    }
  }
}
</script>

<style lang="less" scoped>
    .steps {
        max-width: 750px;
        margin: 16px auto;
    }
</style>
